<template>
  <div class="all">
    <Nav :leftShow="left_show" :leftName="left_name" :rightName="right_name" :titleName="title_name">
    </Nav>
    <van-form @submit="onSubmit" class="addFrom">
      <van-field v-model="username" name="username" label="联系人" placeholder="你的名字" class="people" />
      <van-field name="radio" label="" class="sex">
        <template #input>
          <van-radio-group v-model="radio" direction="horizontal" checked-color="#07c160">
            <van-radio name="1">先生</van-radio>
            <van-radio name="2">女士</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <div class="phone">
        <van-field v-model="telephone" type="Number" name="telephone" label="联系电话" placeholder="你的手机号" class="people" />
        <i class="iconfont icon-jiajian02" @cilck="clickAction"></i>
      </div>
      <van-field v-model="spare" type="spare" name="spare" label="" placeholder="备选电话" class="people addr"
        :class="none" />
      <van-field v-model="address" name="address" label="送餐地址" placeholder="送餐地址" class="people" />
      <van-field v-model="detail" name="detail" label="" placeholder="详细地址（如门牌号等）" class="people addr" />
      <van-field v-model="label" name="label" label="标签" placeholder="无/家/学校/公司" class="people" />
      <div style="margin:10px">
        <van-button round block type="info" native-type="submit" class="submit">
          确定
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
  import Nav from "@/components/Nav.vue";
  export default {
    name: "addaddr",
    data() {
      return {
        left_show: false,
        left_name: '空',
        title_name: '添加地址',
        right_name: '',
        none: "none",
        username: '',
        telephone: '',
        radio: '',
        spare: '',
        address: '',
        detail: '',
        label: '',
      }
    },
    methods: {
      clickAction() {
        alert(123)
        this.none = "normal";
      },
      onSubmit(values) {
        if (values.radio == 1) {
          var sex = "男士"
        } else {
          sex = "女士"
        }
        console.log(sex)
        console.log('submit', values);
        this.indesaddrs.push({ name: values.username, telephone: values.telephone, address: values.address, detail: values.detail, label: values.label, sex: sex });
        this.$store.commit('changeAddr', this.indesaddrs);
        localStorage.setItem("arr2", JSON.stringify(this.indesaddrs));
        this.$router.push({ name: 'chooseaddr' });
      },
    },
    computed: {
      indesaddrs() {
        return this.$store.state.nav.indesaddr;
      }
    },
    components: {
      Nav,
    }
  }
</script>
<style lang="less" scoped>
  .all {
    background-color: rgb(245, 245, 245);
  }

  .addFrom {
    margin-top: 44px;
  }

  .sex {
    background-color: white;
    padding-top: 20px;
    padding-left: 127px;
  }

  .people {
    padding-top: 20px;
    font-size: 16px;
    background-color: white;
  }

  .addr {
    padding-left: 127px;
  }

  .phone {
    display: flex;
  }

  .icon-jiajian02 {
    color: rgb(49, 144, 232);
    padding-top: 20px;
    font-size: 25px;
    padding-right: 10px;
    background-color: white;
  }

  .none {
    display: none;
  }

  .normal {
    display: block;
  }

  .submit {
    background-color: rgb(76, 217, 100);
    border-radius: 5px;
    font-size: 18px;
  }
</style>